import { Theme } from '@react-navigation/native';
import { createTheme } from '@shopify/restyle';

const presetPrimaryColors: Record<string, string> = {
    red: '#F5222D',
    volcano: '#FA541C',
    orange: '#FA8C16',
    gold: '#FAAD14',
    yellow: '#FADB14',
    lime: '#A0D911',
    green: '#52C41A',
    cyan: '#13C2C2',
    blue: '#1677FF',
    geekblue: '#2F54EB',
    purple: '#722ED1',
    magenta: '#EB2F96',
    grey: '#666666',
};

const gray = {
    gray300: '#f5f5f5',
    gray500: '#d9d9d9',
}

const AppTheme = createTheme({
    colors: {
        red: presetPrimaryColors.red,
        volcano: presetPrimaryColors.volcano,
        orange: presetPrimaryColors.orange,
        gold: presetPrimaryColors.gold,
        yellow: presetPrimaryColors.yellow,
        lime: presetPrimaryColors.lime,
        green: presetPrimaryColors.green,
        cyan: presetPrimaryColors.cyan,
        blue: presetPrimaryColors.blue,
        geekblue: presetPrimaryColors.geekblue,
        purple: presetPrimaryColors.purple,
        magenta: presetPrimaryColors.magenta,
        grey: presetPrimaryColors.grey,
        gray: presetPrimaryColors.gray,

        ...gray,

    },
    spacing: {
        s: 8,
        m: 16,
        l: 24,
        xl: 40,
    },
    textVariants: {
        header: {
            fontWeight: 'bold',
            fontSize: 34,
        },
        body: {
            fontSize: 16,
            lineHeight: 24,
        },
        defaults: {
            // We can define a default text variant here.
        },
    },
});

export const NavigationTheme: Theme = {
    dark: false,
    colors: {
        primary: 'rgb(0, 122, 255)',
        background: 'rgb(242, 242, 242)',
        card: 'rgb(255, 255, 255)',
        text: 'rgb(28, 28, 30)',
        border: 'rgb(216, 216, 216)',
        notification: 'rgb(255, 59, 48)',
    }
}


export type AppThemeType = typeof AppTheme;
export default AppTheme;